EverWeb Widgets
EverWeb Code Insertion
EverWeb provides various ways to insert code into the correct place in the HTML doc. It's really important to understand which types of code go where and the effect that their position and content will have on the existing code.
Head and footer code can be inserted into every page of the site by using the head and footer code boxes in the Site Publishing Settings page.
Head and footer code is inserted into the individual pages by using the head and footer code boxes at the bottom of the Page inspector.
The code for objects that will appear in the page content is inserted by pasting it into an HTML Snippet.
NOTE: It is important to use a suitable widget for inserting items which are responsive and/or use jQuery.
Tags
CSS must be enclosed in opening <style> and closing </style> style tags.
Javascript must be enclosed in opening <script> and closing </script> script tags.
Links to an external stylesheet must have the rel attribute …
<link rel="stylesheet" href="styles.css">
NOTE: Although include in the examples below, under HTML5 the opening style and script tags do not required the type attribute.
Head Code
The head code box is used for any code or scripts that are required to be loaded before the viewable content. This includes meta data, external and internal CSS and some javascript.
<!-- Meta Data -->
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- External Styles -->
<link type="text/css" rel="stylesheet" href="main.css">
<!-- Internal Styles -->
<style type="text/css">
h1 {font:20px Verdana, sans-serif;color:#000;margin:0;padding:0;text-align:center}
</style>
<!-- Javascript -->
<script type="text/javascript">today=new Date();y0=today.getFullYear();</script>
Content
Any code pasted into an HTML Snippet will appear in the body of the HTML doc. This can include HTML, inline CSS and, in certain cases, javascript pertaining to the object created by the HTML.
EverWeb injects this code into the content area of the page. If the object created by the snippet is required in the header or the footer, drag it into the appropriate area either while holding down the Command key or by checking the box next to "Allow free dragging" in the Metrics inspector.
<!-- HTML, Inline CSS & Javascript -->
<footer class="codeFooter"><p style="color:#0000FF">© EverWeb Widgets - <script type="text/javascript">document.write(y0);</script></p><a href="#" class="GoTop"></a></footer>
Footer Code
Code pasted into the footer code box will apear just before the closing body tag - </body> This is where javascript and links to external javascript files are inserted for items such as Google analytics, media players, slideshows and so on...
<!-- Javascript -->
<script type="text/javascript">
var $ = jQuery.noConflict();
jQuery(document).ready(function( $ ){});
$('.GoTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
</script>
Comments
Code is commented to provide hints as to what the various items do and how they can be customized. These comments should be removed before publishing the page if a optimizer application is not being used to process the files before publishing.
HTML comments look like this - <!-- Comment goes here -->
Javascript will sometimes be commented like this …
<script type="text/javascript">
<!--
if (screen.width <= 600) {
window.location = "http://mobile.domain-name.com"; }
-->
</script>
In this case the comments - marked in red - can be removed.
Individual lines of javascript can commented like this …
autoplay: false, // true or false
transition: 'fade', // transition options are 'fade', 'slide-left', 'slide-right'
The code will still work but it is inefficient to leave them in.
CSS comments look like this...
p {font:15px Verdana, sans-serif;color:#000000} /* change the font size, font family & font color */
Again, the code will still work with the comments in place but it is better to take the time to remove them if you are not using an optimizer.